<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { Game } from '@/types/game';
  import {
    getGameDetail,
    getGamePlayList,
    getPlayerScore,
    queryCourseHole,
  } from '@/api/game';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import { Play1PlayerScore, PlayerScore } from '@/types/game-score';
  import { CourseHole } from '@/types/course';
  import { kickOffDirectionNames, kickOffTypeNames } from '@/config/game';
  import _ from 'lodash';

  const gameInfo = ref<Game | null>(null);
  const route = useRoute();

  const holeList = ref<CourseHole[]>([]);
  const initHoleData = async () => {
    const res = await queryCourseHole(route.query.gameId as string);
    holeList.value = (res.data.data || []).sort(
      (a, b) => a.holeIndex - b.holeIndex
    );
  };

  const playerScore = ref<PlayerScore | undefined>(undefined);
  const totalScore = ref<number | null>(null);

  const initData = async () => {
    try {
      const gameRes = await getGameDetail(route.query.gameId as string);
      gameInfo.value = gameRes.data.data || {};

      await initHoleData();
      const scoreRes = await getPlayerScore(route.query.gameId as string);
      playerScore.value = scoreRes.data.data.find(
        (item) => item.id === route.query.userId
      );

      const playRes = await getGamePlayList(route.query.gameId as string);
      const list = playRes.data.data || [];
      const thePlayResult = list.find((i) => i.playId === 1);
      if (thePlayResult) {
        const scoreList = JSON.parse(
          thePlayResult.result || '[]'
        ) as Play1PlayerScore[];
        const userScore = scoreList.find(
          (i) => i.userId === route.query.userId
        );
        if (userScore) {
          totalScore.value = _.sum(userScore.scoreList || []);
        }
      }
    } finally {
      // do nothing
    }
  };

  onMounted(() => {
    initData();
  });
</script>

<template>
  <div class="wrapper">
    <div class="report">
      <div class="report-title">{{ playerScore?.nickname }} 成绩报告</div>
      <div class="course-name">{{ gameInfo?.course?.name }}</div>
      <div v-if="gameInfo" class="game">
        <div class="game-name">{{ gameInfo.name }}</div>
        <div class="game-date">
          {{ dayjs(gameInfo.startDate).format('YYYY年MM月DD日') }}
        </div>
      </div>

      <div class="group">
        <div class="group-title">前九</div>
        <table :cellspacing="0" :cellpadding="0">
          <tr>
            <td class="small-text gray-bg">HOLE</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 0)"
              :key="hole.id"
              class="small-text gray-bg"
            >
              {{ hole.holeIndex }}
            </td>
            <td rowspan="2" class="small-text gray-bg">OUT</td>
          </tr>
          <tr>
            <td class="small-text gray-bg">PAR</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 0)"
              :key="hole.id"
              class="small-text gray-bg"
            >
              {{ hole.par }}
            </td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">杆数</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 0)"
              :key="hole.id"
            >
              {{
                playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                  ?.parCount
              }}
            </td>
            <td rowspan="5">{{ playerScore.gameTotalScore?.startNine }}</td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">推杆</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 0)"
              :key="hole.id"
              class="has-right-border"
            >
              {{
                playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                  ?.putCount
              }}
            </td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">罚杆</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 0)"
              :key="hole.id"
              class="has-right-border"
            >
              {{
                playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                  ?.penaltyCount
              }}
            </td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">开球</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 0)"
              :key="hole.id"
              class="has-right-border"
            >
              {{
                kickOffTypeNames[
                  playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                    ?.kickOffType || 0
                ]
              }}
            </td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">方向</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 0)"
              :key="hole.id"
              class="has-right-border"
            >
              {{
                kickOffDirectionNames[
                  playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                    ?.kickOffDirection || 0
                ]
              }}
            </td>
          </tr>
        </table>
      </div>

      <div class="group">
        <div class="group-title">后九</div>
        <table :cellspacing="0" :cellpadding="0">
          <tr>
            <td class="small-text gray-bg">HOLE</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 1)"
              :key="hole.id"
              class="small-text gray-bg"
            >
              {{ hole.holeIndex }}
            </td>
            <td rowspan="2" class="small-text gray-bg">IN</td>
          </tr>
          <tr>
            <td class="small-text gray-bg">PAR</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 1)"
              :key="hole.id"
              class="small-text gray-bg"
            >
              {{ hole.par }}
            </td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">杆数</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 1)"
              :key="hole.id"
            >
              {{
                playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                  ?.parCount
              }}
            </td>
            <td rowspan="5">{{ playerScore.gameTotalScore?.endNine }}</td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">推杆</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 1)"
              :key="hole.id"
            >
              {{
                playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                  ?.putCount
              }}
            </td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">罚杆</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 1)"
              :key="hole.id"
            >
              {{
                playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                  ?.penaltyCount
              }}
            </td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">开球</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 1)"
              :key="hole.id"
            >
              {{
                kickOffTypeNames[
                  playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                    ?.kickOffType || 0
                ]
              }}
            </td>
          </tr>
          <tr v-if="playerScore">
            <td class="small-text gray-bg">方向</td>
            <td
              v-for="hole in holeList.filter((i) => i.holeType === 1)"
              :key="hole.id"
            >
              {{
                kickOffDirectionNames[
                  playerScore.gameHoleScores.find((i) => i.holeId === hole.id)
                    ?.kickOffDirection || 0
                ]
              }}
            </td>
          </tr>
        </table>
      </div>

      <div v-if="playerScore" class="group">
        <div class="group-title">数据统计</div>
        <table :cellspacing="0" :cellpadding="0">
          <tr>
            <td class="small-text gray-bg">老鹰</td>
            <td class="small-text gray-bg">小鸟</td>
            <td class="small-text gray-bg">标准杆</td>
            <td class="small-text gray-bg">柏忌</td>
            <td class="small-text gray-bg">双柏忌</td>
            <td class="small-text gray-bg">打爆</td>
            <td class="small-text gray-bg">上球道率</td>
            <td class="small-text gray-bg">上果岭率</td>
            <td class="small-text gray-bg">推杆数</td>
            <td class="small-text gray-bg">总杆</td>
            <td class="small-text gray-bg">净杆</td>
            <td class="small-text gray-bg">微分成绩</td>
          </tr>
          <tr>
            <td>
              {{ playerScore.gameTotalScore?.eagleCount }}
            </td>
            <td>
              {{ playerScore.gameTotalScore?.birdieCount }}
            </td>
            <td>
              {{ playerScore.gameTotalScore?.parCount }}
            </td>
            <td>
              {{ playerScore.gameTotalScore?.bogeyCount }}
            </td>
            <td>
              {{ playerScore.gameTotalScore?.doubleBogeyCount }}
            </td>
            <td>
              {{ playerScore.gameTotalScore?.moreBogeyCount }}
            </td>
            <td>
              {{
                playerScore.gameTotalScore?.fairwayRatio !== null &&
                playerScore.gameTotalScore?.fairwayRatio !== undefined
                  ? (playerScore.gameTotalScore.fairwayRatio * 100).toFixed(2) +
                    '%'
                  : ''
              }}
            </td>
            <td>
              {{
                playerScore.gameTotalScore?.greenRatio !== null &&
                playerScore.gameTotalScore?.greenRatio !== undefined
                  ? (playerScore.gameTotalScore.greenRatio * 100).toFixed(2) +
                    '%'
                  : ''
              }}
            </td>
            <td>{{ playerScore.gameTotalScore?.putCount }}</td>
            <td>{{ playerScore.gameTotalScore?.total }}</td>
            <td>{{ playerScore.gameTotalScore?.pureTotal }}</td>
            <td>{{ (playerScore.gameTotalScore?.cdwf || 0).toFixed(1) }}</td>
          </tr>
        </table>
      </div>

      <div v-if="totalScore != null" class="result">
        <div>{{ totalScore }}</div>
        本场得分
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .wrapper {
    background: #f1f1f1;
  }
  .report {
    background-repeat: no-repeat;
    background-position: 10px -90px;
    background-image: url('https://qiming-golf-zjk.oss-cn-zhangjiakou.aliyuncs.com/golf/golf/icons/%E5%B7%AE%E7%82%B9%E7%B3%BB%E7%BB%9Fai-02%20%5B%E8%BD%AC%E6%8D%A2%5D.png');
    background-color: #fff;
    background-size: 280px 280px;
    //background: #fff;
    width: 774px;
    padding: 30px 20px;
    margin: 0 auto;

    &-title {
      font-size: 20px;
      font-weight: 600;
      margin: 80px auto 10px;
      text-align: center;
    }
  }

  .course-name {
    margin: 10px auto;
    text-align: center;
  }

  .game {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 3px solid rgb(var(--green-7));
    color: var(--color-text-2);
  }

  .group {
    margin-bottom: 10px;
    &-title {
      line-height: 40px;
      text-align: center;
      background: rgb(var(--gray-2));
      margin-bottom: 10px;
      font-size: 16px;
      letter-spacing: 0.5em;
    }

    table {
      font-size: 14px;
      width: 100%;
      border-top: 1px solid rgb(var(--gray-4));
      border-left: 1px solid rgb(var(--gray-4));
      td {
        padding: 8px 0;
        border-right: 1px solid rgb(var(--gray-4));
        border-bottom: 1px solid rgb(var(--gray-4));
        text-align: center;
        width: 80px;
        font-size: 15px;
        &.small-text {
          font-size: 12px;
          font-weight: 600;
        }
        &.gray-bg {
          background: rgb(var(--gray-2));
        }
      }
    }
  }

  .result {
    margin: 30px 0;
    text-align: center;
    font-size: 16px;
    color: var(--color-text-2);
    div {
      margin: 10px 0;
      font-size: 50px;
      color: rgb(var(--green-7));
      font-weight: 600;
    }
  }
</style>
